<template>
  <el-dialog
    :destroy-close="true"
    :visible.sync="visiable"
    append-to-body
    lock-scroll
    modal
    modal-append-to-body
    show-close
    title="新增跟进记录"
    width="60%"
    @close="close"
  >
    <el-form :inline="true" label-position="right" label-width="150px">
      <el-form-item label="教练姓名" prop="operateBy">
        <el-input v-model="form.operateBy" disabled placeholder="请输入关键字" />
      </el-form-item>

      <el-form-item label="记录时间">
        <el-input v-model="form.createTimeStr" disabled placeholder="请输入关键字" />
      </el-form-item>
    </el-form>
    <!--    :inline="true"-->
    <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="150px">

      <el-form-item label="1. 自杀风险等级" prop="riskLevel">
        <el-radio-group v-model="form.riskLevel">
          <el-radio label="0">无风险</el-radio>

          <el-radio label="1">低风险</el-radio>
          <el-radio label="2">中风险</el-radio>
          <el-radio label="3">高风险</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" prop="riskLevelDesc">
        <el-input
          v-model="form.riskLevelDesc"
          :autosize="{ minRows: 3, maxRows: 6}"
          placeholder="请输入关键字"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="2. 上周作业情况" prop="weekWork">
        <el-radio-group v-model="form.weekWork">
          <el-radio label="0">超额完成</el-radio>
          <el-radio label="1">完成</el-radio>
          <el-radio label="2">部分完成</el-radio>
          <el-radio label="3">未完成</el-radio>
          <el-radio label="4">第一周，还没有上周作业</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" prop="weekWorkDesc">
        <el-input
          v-model="form.weekWorkDesc"
          :autosize="{ minRows: 3, maxRows: 6}"
          placeholder="请输入关键字"
          type="textarea"
        />

      </el-form-item>
      <el-form-item label="3. 来访者反馈" prop="visitorsFeedback">
        <el-input
          v-model="form.visitorsFeedback"
          :autosize="{ minRows: 3, maxRows: 6}"
          placeholder="请输入关键字"
          type="textarea"
        />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        :loading="requesting"
        type="primary"
        @click="onSubmit"
      >保存
      </el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { AddFollowList } from '@/api/api'
import { mapGetters } from 'vuex'

export default {
  name: 'PatientFollowFormDialog',

  data() {
    return {
      requesting: false,
      visiable: false,
      form: {
        operateType: 1,
        operateBy: '',
        riskLevel: -1,
        riskLevelDesc: '',
        weekWork: -1,
        weekWorkDesc: '',
        visitorsFeedback: '',
        createTime: this.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
      },
      rules: {
        // name: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        //   region: [
        //   { required: true, message: '请选择活动区域', trigger: 'change' }
        // ],
        //   date1: [
        //   { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        // ],
        //   date2: [
        //   { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        // ],
        //   type: [
        //   { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        // ],
        riskLevel: [
          { required: true, message: '请选择自杀风险等级', trigger: 'change' }
        ],
        riskLevelDesc: [
          { required: true, message: '请填写自杀风险说明', trigger: 'blur' }]

        // weekWork: [
        //   { required: true, message: '请选择上周作业情况', trigger: 'change' }
        //
        // ],
        // weekWorkDesc: [
        //   { required: true, message: '请填写上周作业情况', trigger: 'blur' }
        // ]

      }
    }
  },
  computed: {
    ...mapGetters([
      'userName',
      'userId'
    ])
  },
  mounted() {
    this.form.operateBy = this.userName
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // alert('submit!')

          if (this.form.riskLevel < 0) {
            return this.$message.warning('请选择自杀风险等级')
          }
          // if (this.form.weekWork < 0) {
          //   return this.$message.warning('请选择上周作业情况')
          // }

          this.requestSubmit()
        } else {
          console.log('error submit!!')
          this.$message.warning('请输入必填项')
          return false
        }
      })
    },
    async requestSubmit() {
      if (this.requesting) {
        return
      }
      this.requesting = true
      const params = {
        ...this.form,
        operateBy: this.userId,
        userId: this.$route.query.id
      }
      try {
        const res = await AddFollowList(params)
        this.requesting = false

        if (res.data.code !== 200) {
          this.$message.error(res.data.msg)
          return
        }
        this.$message.success(res.data.msg)
        this.$emit('updated')
        this.close()
      } catch (e) {
        this.requesting = false
        this.$message.error(e)
      }
    },

    close() {
      this.visiable = false
      this.$emit('onClose')
    }
  }

}
</script>

<style scoped>

</style>
